<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="'产品中心-' + ${companyProfile.name}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}"/>
    <meta name="description" th:content="${companyProfile.seoDescription}"/>
    <link rel="icon" href="/static/favicon.png"/>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../static/css/css.css">
    <link rel="stylesheet" href="../static/css/product.css">
</head>
<body ontouchstart="" data-ind="2">
<style>
    table {
        margin: 0px auto;
    }
</style>
<div th:replace="menu :: menu"></div>
<div class="mohead clearfix">
    <a class="logoBox" href="/" rel="noopener noreferrer"><img th:src="${companyProfile.logo}"></a>
    <div class="menu">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<div class="maskout">
    <img src="../static/picture/close.png">
</div>
<div th:replace="m-menu :: m-menu"></div>

<div class="leg"></div>
<div id="banner-box">
    <img src="http://120.25.100.147/uploads/cunshe/products.jpg" alt="banner">
    <div class="inbox">
        <div class="title-box">
            <div class="cn wow fadeInUp_qs50" ms="ms">产品中心</div>
        </div>
        <div class="info wow fadeInUp_qs50" ms="ms"></div>
    </div>
</div>

<div id="banner-box" style="display:none;">
    <div class="swiper-container" id="probanner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../static/picture/20210309142534_0357.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../static/picture/20210309144749_9499.gif" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../static/picture/20200413135537_4540.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination" id="probannerSP"></div>
    </div>
</div>
<div class="k-box pro-k-box wow fadeInUp_qs50" ms="ms">
    <div class="" id="navbar-box">
        <div class="pro-dh-box clearfix wrap">
            <a th:href="'#a' + ${idx.index}" block="" class="hoverbtn dh-btn" th:each="series, idx: ${seriesList}">
                <div class="icon">
                    <img src="../static/fl/1fenlei.png" class="nor" alt="">
                    <img src="../static/fl/1fenlei.png" class="act" alt="">
                </div>
                <div class="te" th:text="${series}">力学检测设备</div>
            </a>

        </div>
    </div>
</div>

<div class="all-box">
    <div class="pro-class-box" th:each="series, idx: ${seriesList}">
        <div th:id="'a' + ${idx.index}" class="maodian"></div>
        <div class="title-box">
            <div class="title" th:text="${series}">力学检测设备</div>
            <div class="te"></div>
        </div>
        <ul class="clearfix wrap">
            <li class="wow fadeInUp_qs50" ms="ms" th:each="p: ${products}" th:if="${p.category1Name == series}">
                <a th:href="'/product_detail_' + ${p.id}" rel="noopener noreferrer">
                    <div class="imgbox">
                        <img th:src="${p.img != null ? p.img : '/static/empty_img.jpg'}">
                    </div>
                    <div class="te" th:text="${p.title}"></div>
                </a>
            </li>

        </ul>
    </div>

</div>

<div th:replace="footer :: footer"></div>

</body>
<script src="../static/js/swiper-3.4.2.min.js"></script>
<script src="../static/js/jquery-1.11.3.min.js"></script>
<script src="../static/js/wow.min.js"></script>
<script src="../static/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        var proBanner = creatSwiper("#probanner", {
            loop: true
        })

        var md = $(".maodian");
        var wh = window.innerHeight;
        $(window).scroll(function (e) {
            var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            for (var i = 0; i < md.length; i++) {
                var mdTop = $(md[i]).offset().top;
                if (scrollDistance + wh * 0.5 > mdTop) {
                    $(".pro-k-box #navbar-box .pro-dh-box a").eq(i).addClass("act").siblings().removeClass("act");
                }
            }
        })
    })
</script>
</html>